<template>
  <div class="detail-container">
    <el-page-header
      :content="'管理员【' + route.query.username + '】的详情'"
      @back="goBack"
    />
    <el-descriptions border :column="2" title="详情">
      <el-descriptions-item>
        <template #label>账号</template>
        {{ route.query.username }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>真实姓名</template>
        {{ route.query.realName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>角色</template>
        {{ route.query.role }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>角色码</template>
        {{ route.query.roleCode }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>头像</template>
        <el-image
          :preview-src-list="imgList"
          :src="route.query.avatarUrl"
          style="width: 80px; height: 80px"
        />
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>最近IP</template>
        {{ route.query.lastIp }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>登录次数</template>
        {{ route.query.loginNum }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template #label>最近登录</template>
        {{ route.query.lastTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>创建时间</template>
        {{ route.query.createTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>更新时间</template>
        {{ route.query.updateTime }}
      </el-descriptions-item>
    </el-descriptions>

    <vab-json-viewer
      v-show="false"
      copyable
      :expand-depth="5"
      sort
      :value="route"
    />
  </div>
</template>

<script>
  import {
    defineComponent,
    getCurrentInstance,
    nextTick,
    reactive,
    toRefs,
  } from 'vue'
  import { useStore } from 'vuex'
  import { useRoute, useRouter } from 'vue-router'
  import { handleActivePath } from '@/utils/routes'
  import VabJsonViewer from '@/extra/VabJsonViewer'

  export default defineComponent({
    name: 'Detail',
    components: { VabJsonViewer },
    setup() {
      const store = useStore()
      const route = useRoute()
      const router = useRouter()

      const { proxy } = getCurrentInstance()

      const changeTabsMeta = (options) =>
        store.dispatch('tabs/changeTabsMeta', options)
      const delVisitedRoute = (path) =>
        store.dispatch('tabs/delVisitedRoute', path)

      const state = reactive({
        route: { query: { title: '加载中' } },
        form: {
          text: '',
        },
        title: '加载中',
        imgList: [],
      })

      const goBack = async () => {
        const detailPath = await handleActivePath(route, true)
        await router.push('/admin/adminUser')
        await delVisitedRoute(detailPath)
      }

      const handleRefreshMainPage = () => {
        proxy.$pub('reload-router-view', 'ComprehensiveTable')
      }

      nextTick(() => {
        changeTabsMeta({
          title: '详情页',
          meta: {
            title: `${route.query.title} 详情页`,
          },
        })
        state.title = route.query.title
        state.route = {
          path: route.path,
          params: route.params,
          query: route.query,
          name: route.name,
          meta: route.meta,
        }
      })

      const jsonData = {
        name: 'qiu', //字符串
        age: 18, //数组
        isMan: false, //布尔值
        date: new Date(),
        fn: () => {},
        arr: [1, 2, 5],
      }

      return {
        ...toRefs(state),
        goBack,
        jsonData,
        handleRefreshMainPage,
      }
    },
    mounted() {
      this.imgList.push(this.$route.query.avatarUrl)
    },
  })
</script>
